<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-06-06 22:32:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-07 21:16:24
-->
<template>
  <div>
    <!-- 表单 搜索 -->
    <div>
      <el-row>
        <el-col :span="20">
          <!--状态选择框-->
          <el-form size="small" :inline="true" :model="param">
            <el-form-item>
              <el-select v-model="param.status" placeholder="请选择状态" clearable>
                <el-option
                  v-for="item in statusOption"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <!--标题输入框-->
            <el-form-item>
              <el-input v-model="param.name" placeholder="请输入标题" clearable></el-input>
            </el-form-item>
            <!--分类选择框-->
            <el-form-item>
              <el-select v-model="param.categoryId" placeholder="请选择分类" clearable>
                <el-option
                  v-for="item in categoryOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!--查询按钮-->
            <el-form-item>
              <el-button type="primary"  @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="primary" size="small">发布</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 显示数据 -->
    <div>
      <el-table :data="articles" size="small" align="center">
        <el-table-column width="80" prop="id" label="编号"></el-table-column>
        <!--封面-->
        <el-table-column width="180" label="封面" align="center">
          <template v-slot="scope">
            <el-image 
              style="width: 140px; height: 80px"
              :src="scope.row.cover"
              :fit="fit"></el-image>
          </template>
        </el-table-column>
        <!--风采-->
        <el-table-column  label="风采">
          <template v-slot="scope">
            <div>{{scope.row.title}}</div>
            <div v-if="scope.row.author!=null">{{scope.row.author.username}}</div>
            <div v-if="scope.row.category!=null">{{scope.row.category.name}}</div>
            <div>{{scope.row.publishTime}}</div>
          </template>
        </el-table-column>
         <!--状态-->
        <el-table-column width="120" label="状态" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status==statusOption[0]" type="info">{{scope.row.status}}</el-tag>
            <el-tag v-if="scope.row.status==statusOption[1]" type="success">{{scope.row.status}}</el-tag>
            <el-tag v-if="scope.row.status==statusOption[2]" type="danger">{{scope.row.status}}</el-tag>
            <el-tag v-if="scope.row.status==statusOption[3]" type="warning">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <!--操作-->
        <el-table-column width="180" label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" size="mini" style="color:#67C23A" @click=" recommendHandler(scope.row.id)">推荐</el-button>
            <el-button type="text" size="mini" style="color:#909399" @click="checkHandler(scope.row.id)">审核</el-button>
            <el-button type="text" size="mini" style="color:#F56C6C" @click="deleteHandler(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import {get} from '@/utils/request'
  export default {
    data(){
      return {
        categoryOption:[],
        statusOption: ['未审核',
                   '审核通过',
                   '审核不通过',
                   '推荐',
                  ],
        articles:[],
        param:{},
        
      }; 
    },
    methods:{
      deleteHandler(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = "/article/deleteById"
          get(url,{id}).then(resp => {
            this.$message({ type:"success", message:resp.message })
            this.loadData();
          })
        })
      },
      loadData(){
        let url = "/category/query"
        get(url).then(resp => {
          this.categoryOption = resp.data;
        })
        console.log(this.param)
        url = "/article/queryCascade";
        get(url,this.param).then(resp => {
          this.articles = resp.data;
        })
       
      },
      //推荐
      recommendHandler(id){
        this.$message({message:"该功能暂未开发！",type:"error"});
      },
      //审核
      checkHandler(id){
        this.$message({message:"该功能暂未开发！",type:"error"});
      }
    },
    created(){
      // 页面渲染出来后执行查询数据操作
      this.loadData();
    }
  }
</script>

<style scoped>

</style>

